<template>
  <a-card>
    <span class="params_data_list_title">检测参数配置</span>
    <div class="code_fun_box">
      <span class="fun_code">功能码：{{ equipmentStore.$state.currentFunCodeAnd485AddressData.funCode }}</span>
      <span class="address">485地址：{{ equipmentStore.$state.currentFunCodeAnd485AddressData.address485 }}</span>
    </div>
    <a-table
      v-if="!equipmentStore.isJSONParamConfList"
      :data="equipmentStore.$state.parmasConfDataList"
      :columns="tabDataMODBUSColumns"
      size="small"
      :bordered="{ cell: true }"
      :pagination="false"
    ></a-table>
    <a-table
      v-else
      :data="equipmentStore.$state.parmasConfDataList"
      :columns="tabDataJSONColumns"
      size="small"
      :bordered="{ cell: true }"
      :pagination="false"
    ></a-table>
  </a-card>
</template>

<script lang="ts">
import { defineComponent, ref, onMounted } from 'vue'
export default defineComponent({
  name: 'paramsDataListCard'
})
</script>
<script lang="ts" setup>
// 引入
import { useEquipmentStore } from '@/store'
const equipmentStore = useEquipmentStore()

// 表格字段的规则数据---MODBUS
const tabDataMODBUSColumns = ref([
  {
    title: '名称',
    dataIndex: 'paramName',
    slotName: 'paramName',
    align: 'center'
  },
  {
    title: '起始位',
    dataIndex: 'startHexStr',
    slotName: 'startHexStr',
    align: 'center'
  },
  {
    title: '操作位',
    dataIndex: 'numMade',
    slotName: 'numMade',
    align: 'center'
  },
  {
    title: '保留位数',
    dataIndex: 'reserveNum',
    slotName: 'reserveNum',
    align: 'center',
    width: 100
  },
  {
    title: '字节序',
    dataIndex: 'byteType',
    slotName: 'byteType',
    align: 'center'
  },
  {
    title: '备注',
    dataIndex: 'paramDesc',
    slotName: 'paramDesc',
    width: 300,
    align: 'center'
  }
])

// 表格字段的规则数据---JSON
const tabDataJSONColumns = ref([
  {
    title: '名称',
    dataIndex: 'paramName',
    slotName: 'paramName',
    align: 'center'
  },
  {
    title: '保留位数',
    dataIndex: 'reserveNum',
    slotName: 'reserveNum',
    align: 'center'
  },
  {
    title: '备注',
    dataIndex: 'paramDesc',
    slotName: 'paramDesc',
    align: 'center'
  }
])
</script>

<style lang="scss" scoped>
.params_data_list_title {
  display: inline-block;
  line-height: 35px;
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 10px;
}

.code_fun_box {
  width: 180px;
  margin-left: 20px;
  display: inline-flex;
  flex-direction: row;
  justify-content: space-between;

  .fun_code {
    letter-spacing: 1px;
    font-weight: bold;
    font-family: '黑体';
  }

  .address {
    letter-spacing: 1px;
    font-weight: bold;
    font-family: '黑体';
  }
}
</style>
